<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">总价：{{totalPrice}}</div>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			const app = new Vue({
				el: '#app',
				data: {
					books: [
						{id: 110,name: 'Unix编程艺术', price: 110},
						{id: 111,name: '代码大全', price: 105},
						{id: 112,name: '深入理解计算机原理', price: 98},
						{id: 113,name: '现代操作系统', price: 80}
					]
				},
				computed: {
					totalPrice: function() {
						let result = 0;
						/* for (let i = 0; i < this.books.length; i++) {
							result += this.books[i].price;
						} */
						//ES5
						/* for(let i in this.books){
							result += this.books[i].price;
						} */
						
						// ES6写法
						for (let book of this.books) {
							result += book.price;
						}
						return result;
					}
				}
			});
		</script>
	</body>
</html>
